<template>
  <div class="container">
    <el-main class="main-1">
      <router-link to="/">首页</router-link>
      &nbsp;>&nbsp;游戏中心
    </el-main>

    <!-- <el-main class="main-2">
      <ul>
        <li>
          <dl>
            <dt>游戏平台：</dt>
            <dd><a>全部</a></dd>
            <dd><a>安卓</a></dd>
            <dd><a>IOS</a></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>游戏分类：</dt>
            <dd><a>网游</a></dd>
            <dd><a>全BT版</a></dd>
            <dd><a>满vip版</a></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>游戏类型：</dt>
            <dd><a>全部</a></dd>
            <dd><a>仙侠</a></dd>
            <dd><a>传奇</a></dd>
            <dd><a>竞速</a></dd>
            <dd><a>卡牌</a></dd>
            <dd><a>音乐</a></dd>
          </dl>
        </li>
      </ul>
    </el-main> -->

    <el-main class="main-3">
      <h3>什么是变态手游？</h3>
      <p>
        变态手游，简称BT手游，是指由研发授权推出的手游特色福利专区，通过免费赠送VIP和元宝，调整爆率，提高充值比例等方式，从而达到让玩家快速提升游戏体验的目的。
      </p>
    </el-main>

    <el-main class="main-4">
      <el-row style="background: #3a3131; left: -20px">
        <el-button
          style="height: 70px; font-size: 20px; border-radius: 50%"
          type="primary"
          >人气最高</el-button
        >
        <span
          style="
            float: right;
            font-size: 20px;
            color: #ababab;
            line-height: 68px;
            padding-right: 20px;
          "
          >共
          <i style="color: red">61</i>
          款游戏</span
        >
        <!-- <el-button type="info" style="width:1190px;height:50px;float:right"></el-button> -->
      </el-row>
    </el-main>

    <!-- <div v-for="(item3,i) in cc" :key="i"> -->
    <!-- <div v-for="item4 in pic" :key="item4.id"> -->
    <el-main class="main-5" v-for="item in center" :key="item.id">
      <div class="main-5-1">
        <div class="main-5-1-1">
          <div @click="goto(item)">
            <img :src="item.icon" />
            <el-button type="success">立即下载</el-button>
          </div>
        </div>

        <div class="main-5-1-2">
          <router-link class="main-5-a" to="/gamedetail">{{
            item.name
          }}</router-link>
          <p>
            {{ item.content }}
          </p>
          <p>
            {{ item.explain }}
          </p>
          <button>{{ item.type }}</button>
        </div>

        <div class="main-5-1-3">
          <div class="main-aa"><img :src="item.pic1" alt="" /></div>
          <div class="main-bb"><img :src="item.pic2" alt="" /></div>
          <div class="main-bb"><img :src="item.pic3" alt="" /></div>
        </div>
      </div>
    </el-main>
    <!-- </div> -->
    <!-- </div> -->

    <el-main>
      <el-pagination
        style="background-color: #e9eef3"
        background
        layout="->,prev, pager, next"
        
        :total="inforData.total"
        :current-page="inforData.page"
        :page-size="inforData.pagesize"
        @current-change="pageChange"
      >
      </el-pagination>
    </el-main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      inforData: {
        //绑定当前页面中显示的列表数据
        page: 1,
        pagesize: 5,
        total: 20,
      },
      data: [],
      center: {},
      pic: [],
      cc: {},
      fenye:[]
    };
  },

  methods: {
    
    pageChange(page) {
      console.log(page);
      let params = { page, pagesize: this.inforData.pagesize };
      this.$http.fenyeApi.all(params).then((res) => {
        console.log(res);
        this.fenye = res.data.data;
      });
    },

    getgame_name() {
      const url = "http://127.0.0.1:3100/game_name";
      let params = { page: 1, pagesize: 5 };
      axios.get(url, params).then((res) => {
        console.log(res);
        this.cc = res.data.data;
      });
    },
    getGame_be() {
      const url = "http://127.0.0.1:3100/game";
      axios.get(url).then((res) => {
        console.log(res);
        this.center = res.data.data;
      });
    },

    goto(item) {
      this.$router.push(`/gamedetail?id=${item.id}`);
    },
  },
  mounted() {
    let params = { page: 1, pagesize: this.inforData.pagesize };
    this.$http.fenyeApi.all(params).then((res) => {
      console.log(res);
      this.fenye = res.data.data;
    });

    this.getGame_be();
    // this.getGame_be_img();
    this.getgame_name();
  },
};
</script>

<style>
@import "../assets/reset1.css";
</style>

<style lang="scss" scoped>
div {
  background-color: #f3f3f3;
}
.container {
  // margin-left: 200px;
  margin: 0 auto;
}
.el-main {
  background-color: #e9eef3;
  margin-top: 10px;
}
.main-1 {
  color: #666;
  font-size: 14px;
  padding-left: 5px;
  overflow: hidden;
  height: 30px;
  line-height: 0%;
}

.main-2 {
  background-color: #fff;
  dt {
    width: 80px;
    height: 24px;
  }
  dl {
    display: flex;
  }
  dd {
    padding: 0 10px;
  }
}

.main-3 {
  background: #cef5f6;
  h3 {
    font-family: "微软雅黑";
    color: #f6505c;
    font-size: 20px;
    font-weight: 900;
  }
  p {
    font-style: 14px;
    margin-top: 15px;
  }
}

.main-4 {
  /* el-row{
      background:#3a3131;
      left: -20px;
      el-button{
        height:70px;font-size:20px;border-radius: 50%;
      }
      span{
        float:right;font-size:20px;color:#ababab;line-height:68px;padding-right:20px
        i{
          color: red;
        }
      }
    } */
}

.main-5 {
  margin-top: 10px;

  .main-5-1 {
    width: 100%;
    background-color: #fff;
    .main-5-1-1 {
      background-color: #fff;
      float: left;
      width: 18%;
      padding: 20px 0 5px;
      text-align: center;
      img {
        width: 150px;
        height: 150px;
        display: block;
        margin: 0px 30px 30px 32px;
        border-radius: 20%;
      }
    }
    .main-5-1-2 {
      width: 40%;
      position: relative;
      overflow: hidden;
      float: left;
      background: #fafafa;
      padding-left: 8px;
      padding-bottom: 10px;
      padding-top: 30px;
      .main-5-a {
        font-size: 24px;
        font-weight: bold;
      }
      p {
        margin-block: 20px;
        height: 44px;
        color: #666;
        overflow: hidden;
        line-height: 22px;
        margin-bottom: 25px;
      }
      button {
        padding: 2px 8px;
        font: 12px "微软雅黑";
        color: #288b40;
        border: #288b40 solid 1px;
      }
    }
    .main-5-1-3 {
      width: 40%;
      float: right;
      max-height: 260px;
      overflow: hidden;
      margin-left: 10px;
      > div {
        height: 275px;
        float: left;
        width: 33%;
        > img {
          width: 185px;
          height: 100%;
        }
      }
    }
  }
}
</style>
